<template>
  <div class="hc-search">
    <el-form-item
      class="item_list"
      :label="item.label"
      v-for="(item, index) in data"
      :key="index"
      style="margin-right: 20px"
    >
      <div v-if="item.type == 'input'">
        <el-input v-model="item.value" placeholder="请输入" />
      </div>
      <div v-if="item.type == 'select'">
        <el-select placeholder="请选择" v-model="item.value" style="width: 200px">
          <el-option
            v-for="(obj, i) in item.children"
            :key="i"
            :label="obj.label"
            :value="obj.value"
          />
        </el-select>
      </div>

      <div class="timer" v-if="item.type == 'date'">
        <el-date-picker
          style="width: 150px; margin-right: 5px"
          v-model="item.seditem"
          type="date"
          placeholder="开始时间"
        />
        -
        <el-date-picker
          v-model="item.enditem"
          type="date"
          placeholder="结束时间"
          style="width: 150px; margin-left: 5px"
        />
      </div>
      <div
        v-if="props.data.length - 1 == index"
        style="margin-left: 10px; margin-top: -5px"
      >
        <el-button class="btn" type="primary" @click="SubmitEvent()" >查询</el-button>
        <!-- <el-button class="btn" @click="clear()">清空</el-button> -->
      </div>
      <div
        v-if="item.type == 'add' && item.value" 
        style="margin-left: 10px; margin-top: -5px"
      >
      <el-button
        type="primary"
        style="background-color: #1e6aed"
        
        @click="getadd()"
        ><el-icon><CirclePlus /></el-icon> 新增</el-button
      >
      </div>
    </el-form-item>
  </div>
</template>

<script setup>
import { reactive, defineProps, defineEmits } from "vue";
import { Search } from '@element-plus/icons-vue';

const emit = defineEmits();
const props = defineProps({
  data: {
    type: Array,
    default: () => [],
  },
});

// 查询
const SubmitEvent = () => {
  emit("serch", props.data);
};
// 新增
const getadd = () => {
  emit("getadd");
};

// 清空
const clear = () => {
  props.data.forEach((item) => {
    item.value = "";
    item.seditem = "";
    item.enditem = "";
  });
  emit("serch", props.data);
};
</script>

<style lang="less" scoped>
.hc-search {
  background-color: #f2f3f5;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  padding: 10px;
  padding-bottom: 0;
  border-radius: 6px;
}

.item_list {
  min-width: 200px;
  margin-bottom: 10px;
  font-size: 14px;
}

.timer {
  display: flex;
}
</style>
